<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" title="订单跟踪" />

    <div class="w-full text-gray-800 text-center leading-[80px]" v-if="!detail">
      暂无相关物流信息
    </div>

    <el-descriptions v-if="detail" :column="1" size="small" border>
      <el-descriptions-item label="运单号">{{
        detail.waybillId
      }}</el-descriptions-item>
      <el-descriptions-item label="收货人">{{
        detail.receiver
      }}</el-descriptions-item>
      <el-descriptions-item label="收货人手机号码">{{
        detail.receiverMobile
      }}</el-descriptions-item>
      <el-descriptions-item label="收货手机">{{
        detail.receiverTel
      }}</el-descriptions-item>
      <el-descriptions-item label="收货地址">{{
        detail.receiverAddress
      }}</el-descriptions-item>
      <el-descriptions-item label="送货方式">{{
        detail.pickupWay
      }}</el-descriptions-item>
      <el-descriptions-item label="支付方式">{{
        detail.payType
      }}</el-descriptions-item>
      <el-descriptions-item label="货物名称">{{
        detail.cargoName
      }}</el-descriptions-item>
      <el-descriptions-item label="件数">{{
        detail.volumeDesc
      }}</el-descriptions-item>
      <el-descriptions-item label="总体积">{{
        detail.totalVolume
      }}</el-descriptions-item>
      <el-descriptions-item label="总重量">{{
        detail.totalWeight
      }}</el-descriptions-item>
      <el-descriptions-item label="寄件网点名称">{{
        detail.sendBranchName
      }}</el-descriptions-item>
      <el-descriptions-item label="提货网点">{{
        detail.dispatchBranchName
      }}</el-descriptions-item>
    </el-descriptions>

    <div v-if="trackList.length" class="pl-2 pr-2 pt-2 bg-white">
      <el-timeline>
        <el-timeline-item
          v-for="item in trackList"
          class="cargo-tracking-list"
          :key="item.operationTime"
          color="#ba0c2f"
        >
          <p>
            <span class="step">{{ item.step }}</span>
            <span class="time">{{ formateDate(item.operationTime) }}</span>
          </p>
          <p class="track-desc">
            <span>{{ item.trackDesc }}</span>
          </p>
          <p v-if="item.operationSitePhone" class="time">
            网点电话: {{ item.operationSitePhone }}
          </p>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { orderTrack, orderDetail } from "@/api/order";
import dayjs from "dayjs";
import { showLoadingToast } from "vant";

const router = useRouter();
const route = useRoute();

const onClickLeft = () => router.replace("/order/list");

const detail = ref(null);
const trackList = ref([]);

const formateDate = (time) => dayjs(time).format("YYYY-MM-DD HH:mm:ss");

onMounted(async () => {
  if (route.params.id) {
    const loading = showLoadingToast("数据加载中...");
    try {
      const detailRes = await orderDetail(route.params.id);
      if (detailRes.success) {
        detail.value = detailRes.result;
      }
      const track = await orderTrack(route.params.id);

      if (track.success) {
        trackList.value = trackRes.result;
      }
    } catch {}
    loading.close();
  }
});
</script>

<style scoped>
.cargo-tracking-list {
  font-size: 12px;
}
.cargo-tracking-list .step {
  color: #ba0c2f;
  font-weight: 600;
}
.cargo-tracking-list .time {
  color: #999;
}
.cargo-tracking-list .track-desc {
  color: #333;
}
.el-timeline-item {
  padding-bottom: 8px !important;
}
</style>
